import React , {Component}from 'react';
import { Modal, Button } from 'antd';
import InputBox from '../../common/InputBox.js'
import Select from '../../common/Select.js'
import  Confirm from '../../common/Confirm.js'


export default class Editstaffinfo extends React.Component {
    constructor(props){
        super(props);
        this.state = { 
            visible: false,
        }
        this.Style={};
        this.i=0;
        this.j=0;
        this.k=0;
    }

    componentWillMount() {
        console.warn(this.state.phone+'----'+this.state.name)
        this.Style.addstaffview={
            textAlign:"center",
            display:"block",
            border:"3px solid green"
        }
        this.Style.addstaffview.border = "3px solid red";
        this.Style.addstaffview.width = 400;
        this.Style.addstaffview.height = 200;
        this.Style.addstaffview.fontSize = 30;
        this.Style.headerview={
            width:"634px",
            height:"44px",
            paddingLeft:"18px",
            lineHeight:"44px",
            display:"block",
            background:"#ccc",
            marginBottom:49
        }
    }

    state = { visible: false }
    showModal = () => {
        this.setState({
            visible: true,
        });
    }
    handleOk = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }
    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }
    handleClick(){
        //console.warn(111)
    }

    modify(){
        //console.warn(this.refs.phone.state.text);
        // console.warn(this.refs.workername.state.text)

            let companyname1 = this.refs._enterpriseName.state.text;
            let enterpriseCode1 = this.refs._enterpriseCode.state.text;

            let telephone1 = this.refs._telephone.state.text;
            let re_enterpriseCode = /^([0-9]|[a-z]|[A-Z]){3,15}@([0-9]|[a-z]|[A-Z]){1,5}[\.]([0-9]|[a-z]|[A-Z]){2,5}$/;
            let re_telephone =/^(((13[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(re_enterpriseCode.test(enterpriseCode1)){
                this.i = 1;
            }else {
                this.i = 0;
            }
            if(re_telephone.test(telephone1)){
                this.j = 1;
            }else {
                this.j = 0;
            }
            if(companyname1!=""){
                this.k = 1;
            }else {
                this.k = 0;
            }

            if(this.i+this.j+this.k==3){
                console.log("111111")

            }else {
                return;
            }
    }




    bluron(type){
        switch (type){
            case 'companyhint':
                let companyname1 = this.refs._enterpriseName.state.text;
                // this.companyname = companyname1;
                if(companyname1==""){
                    this.setState({
                        companyhint:"姓名不能为空"
                    });
                }else{
                    this.setState({
                        companyhint:""
                    });
                }
                return;
            case 'mal':
                let enterpriseCode1 = this.refs._enterpriseCode.state.text;
                let re_enterpriseCode = /^([0-9]|[a-z]|[A-Z]){3,15}@([0-9]|[a-z]|[A-Z]){1,5}[\.]([0-9]|[a-z]|[A-Z]){2,5}$/;

                if(re_enterpriseCode.test(enterpriseCode1)){
                    this.enterpriseCode = enterpriseCode1;

                    this.setState({
                        mal:""
                    });
                }else if(enterpriseCode1==""){
                    this.setState({
                        mal:""
                    });
                }else{
                    this.setState({
                        mal:"邮箱格式错误，请重新输入"
                    });
                }
                return;

            case 'connection':
                let telephone1 = this.refs._telephone.state.text;
                let re_telephone =/^(((13[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;

                let telephone;
                if(re_telephone.test(telephone1)){
                    telephone = telephone1;
                    this.setState({
                        connection:""
                    });
                }else if(telephone1==""){
                    this.setState({
                        connection:""
                    });
                }else {
                    this.setState({
                        connection:"手机号格式错误，请重新输入"
                    });
                }
                return;



        }
    }

    render(){
        return (
            <div>
                <Button type="primary" onClick={this.showModal} >编辑员工信息</Button>
                <Modal visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} style={{width:"634px",height:"565px",display:"block"}} title={"编辑员工信息"}>
                    <InputBox defaultvalute="请输入手机号" titletext="手机号" space="40px" style={{width:312,height:30,borderColor:"#efefef",color:"#999",paddingRight:137}} ref={'_telephone'} bluron={this.bluron.bind(this,'connection')}/>
                    <InputBox defaultvalute="请输入姓名" titletext="姓名" space="40px" style={{width:312,height:30,borderColor:"#efefef",color:"#999",marginTop:"20px",paddingRight:137}}  ref={"_enterpriseName"} bluron={this.bluron.bind(this,'companyhint')}/>
                    <span style={{color:"#ff6f64",position:"absolute",left:"120px",top:"33px"}}>{this.state.connection}</span>
                    <span style={{color:"#ff6f64",position:"absolute",left:"120px",top:"88px"}}>{this.state.companyhint}</span>
                    <span style={{color:"#ff6f64",position:"absolute",left:"120px",top:"147px"}}>{this.state.mal}</span>
                    <InputBox defaultvalute="请输入邮箱" titletext="邮箱" space="40px" style={{width:312,height:30,borderColor:"#efefef",color:"#999",marginTop:30,paddingRight:137}} ref={"_enterpriseCode"} bluron={this.bluron.bind(this,'mal')}/>
                    <span style={{position:"absolute",display:"block",left:50,top:172}}>部门</span><Select oArr={oArr1} style={{width:334,height:30,display:"inlineBlock",marginTop:20,marginLeft:113}}/>
                    <span style={{position:"absolute",display:"block",left:50,top:222}}>职务</span><Select oArr={oArr2} style={{width:334,height:30,display:"block",marginTop:20,marginLeft:113}}/>
                    <Confirm tcontext="确认修改" style={{width:265,height:43,display:"block",color:"#fff",fontSize:"16px",marginTop:60,marginLeft:158}} touch={this.modify.bind(this)}/>
                </Modal>
            </div>

        )
    }
}


var oArr1=[
    {text:"请选择部门",value:"0"},
    {text:"技术部",value:"1"},
    {text:"运营部",value:"2"},
    {text:"人事部",value:"3"}
]

var oArr2=[
    {text:"请选择职务",value:"0"},
    {text:"前端开发",value:"1"},
    {text:"后台开发",value:"2"},
    {text:"运营管理",value:"3"}
]




